<template>
	<view>
		<view style="display: flex;flex-direction: column;background-color: #fff;border-radius: 20rpx;margin: 20rpx;">
			<view style="display: flex;flex-direction: column;padding: 30rpx;">
				<view style="display: flex;justify-content: space-between;margin-bottom: 10rpx;">
					<view style="font-size: 40rpx;">{{recruitDataDetail.recruitJob}}</view>
					<view style="color: #20C3FE;font-size: 28rpx;">{{recruitDataDetail.recruitSalary}}</view>
				</view>
				<view
					style="margin-bottom: 10rpx;font-size: 26rpx;color: #909399;display: flex;justify-content: start;align-items: center;">
					<u-icon name="map" size="16" color="#909399"></u-icon>
					<text style="margin-left: 10rpx;">{{recruitDataDetail.workLocation}}</text>
				</view>
				<view style="font-size: 26rpx;color: #909399;">
					{{recruitDataDetail.createTime}}
				</view>
			</view>
			<u-line></u-line>
			<view style="display: flex;justify-content: space-between;align-items: center;padding: 30rpx;">
				<view style="width: 100rpx;height: 100rpx;border-radius: 50%;overflow: hidden;margin-right: 20rpx;">
					<image style="width: 100%;height: 100%;" :src="userAvator(recruitDataDetail.avatar)"></image>
				</view>
				<view style="flex: 1;display: flex;flex-direction: column;justify-content: space-between;">
					<view style="font-size: 28rpx;">
						{{recruitDataDetail.recruitContacts}}
					</view>
					<view style="font-size: 26rpx;color: #909399;">
						{{recruitDataDetail.recruitmentUnit}}
					</view>
				</view>
			</view>
			<u-line></u-line>
			<view style="display: flex;flex-direction: column;padding: 30rpx;">
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">工作要求</view>
					<view style="font-size: 28rpx;">{{recruitDataDetail.recruitAsk}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">联系电话</view>
					<view style="font-size: 28rpx;">{{recruitDataDetail.telephone}}</view>
				</view>
				<view style="display: flex;flex-direction: column;margin-bottom: 20rpx;">
					<view style="font-size: 22rpx;color: #909399;">职位描述</view>
					<view style="font-size: 28rpx;">{{recruitDataDetail.jobDescription}}</view>
				</view>
				<view style="display: flex;flex-direction: column;">
					<view style="font-size: 22rpx;color: #909399;">截止时间</view>
					<view style="font-size: 28rpx;">{{recruitDataDetail.endTime}}</view>
				</view>
			</view>

		</view>
		<!-- 收藏  拨打电话 -->
		<view class="buttom">
			<view class="collect-btn" @click="clickCollect">
				<u-icon name="star" size="24" :color="collectStatus?'#ffaa00':''"></u-icon>
				<text>{{collectStatus?'已收藏':'收藏'}}</text>
			</view>
			<view class="callPhone" @click="call(recruitDataDetail.telephone)">
				<u-icon name="phone" size="24" color="#fff"></u-icon>
				<text>拨打电话</text>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>


</template>

<script>
	import {
		getRecruitDetail,
		getRecruitCollectStatus,
		recruitCollectCancel,
		recruitCollect
	} from '../../config/api.js'
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				id: '',
				recruitDataDetail: {},
				collectStatus: '',
				beOverdue: false
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.getRecruitDetail()
		},
		onShow(){
			this.getRecruitDetail()
		},
		computed: {
			...mapGetters(['getIsLogin', 'getBaseUrl'])
		},
		methods: {
			// 用户头像
			userAvator(pic) {
				if (pic != null && pic != '') {
					return pic.includes('http') ? pic : this.getBaseUrl + pic
				} else {
					return pic
				}
			},
			// 请求数据
			getRecruitDetail() {
				getRecruitDetail({
					recruitId: this.id
				}).then(res => {
					this.recruitDataDetail = res.data.data
					// 获取收藏状态
					this.getStatus();
					this.checkDateTime(this.recruitDataDetail.endTime);
				})
			},
			getStatus() {
				getRecruitCollectStatus({
					recruitId: this.id
				}).then(res => {
					this.collectStatus = res.data.data
				})
			},
			// 收藏
			clickCollect() {
				console.log("点击收藏");
				if (this.getIsLogin) {
					if (this.collectStatus) {
						// 取消收藏
						recruitCollectCancel({
							recruitId: this.id
						}).then(res => {
							this.collectStatus = 0
							this.recruitDataDetail.collect--
							this.$refs.uToast.show({
								type: 'warning',
								message: '取消收藏成功'
							})
						})
					} else {
						// 收藏
						recruitCollect({
							recruitId: this.id,
							collectType: '招聘'
						}).then(res => {
							this.collectStatus = 1
							this.recruitDataDetail.collect++
							this.$refs.uToast.show({
								type: 'success',
								message: '收藏成功'
							})
						})
					}
				} else {
					this.$refs.uToast.show({
						type: 'warning',
						message: '请先登录'
					})
					setTimeout(function() {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
				}

			},
			// 打电话
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			// 判断是否过期
			checkDateTime(time) {
				// 出发时间 - 当前时间 >0 则没发车
				if (Date.parse(time) - new Date().getTime() > 0) {
					this.beOverdue = false
				} else {
					this.beOverdue = true
				}
			},
		}
	}
</script>

<style scoped lang="scss">

	.buttom {
		display: flex;
		position: fixed; // 固定定位
		flex-wrap: wrap; //让弹性盒元素在必要的时候拆行
		justify-content: space-between;
		bottom: 0;
		box-shadow: 0 2px 2px rgba(10, 16, 20, 0.54), 0 0 2px rgba(10, 16, 20, 0.52);
		text-align: center;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;

		.collect-btn {
			justify-content: center;
			align-items: center;
			display: flex;
			width: 50%;
		}

		.callPhone {
			width: 50%;
			display: flex;
			flex-direction: row; //主轴方向row 水平
			align-items: center;
			justify-content: center;
			color: #fff;
			background-color: #20C3FE;
		}
	}
</style>